<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="resources/rooms/bootstrap.css" />
  <link rel="stylesheet" href="resources/rooms/app.css" />
  <link rel="stylesheet" href="resources/rooms/fontAwesome/css/prettify.css">
	<link rel="stylesheet" href="resources/rooms/fontAwesome/css/font-awesome.css" />
	<link href='http://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script src="resources/rooms/bootstrap.js"></script>
  <script src="https://cdn.firebase.com/v0/firebase.js"></script>
</head>
<body>
  <script type="text/javascript">
    $(function(){
      $('#topic_input').focus()

      var topics=new Firebase('https://adviseme.firebaseio.com/rooms/topics')
  
      // get a list of topics 
      listTopics=function(){
        topics.on('value',function(data){
          $('#listContainer').html('')
          // iterate through the list
          data.forEach(addTopicLink)
        })
      }
      
      // User types in new topic
      addTopic=function(name,session_id){
        // check to see if topic already exist
        name=name.toLowerCase()
        for(var i=0; i<$('.each_room_name').length; i++){
          if(name== $( $('.each_room_name')[i] ).text().toLowerCase() ){
            window.location="room/"+name;
            return;
          }
        }
        var newTopicRef=new Firebase('https://adviseme.firebaseio.com/rooms/topics/'+name)
        newTopicRef.set({name:name,session_id:session_id,totalUser:1}, function(){
          window.location="room/"+name;
        });
      }
      
      // Adding the UI for each room/topic
      addTopicLink=function(topic){
        topicName=topic.val()['name'].toLowerCase()
        totalUser=topic.val()['totalUser']
        if(totalUser=="0"){
          // remove the topic if its empty
          topic.ref().remove(listTopics)
        }else{
          // insert the room into listContainer div
          var template='<a href="room/'+topicName+'" topic="'+topicName+'"class="each_room btn">'+
            '<i class="icon-group"></i>'+
            '<span class="each_room_name">'+topicName+'</span>'+
            '<span class="totalUser">'+totalUser+'</span>'+
          '</a>'   
          $('#listContainer').append(template)    
        }
      }
  
      // Create room, grab sessionId first
      function submitTopic(){
        var name=$('#topic_input').val()
        // post request, get the session_id
        $.post( 'room/getSession',{},function(data){
          if(data!=null){
              addTopic(name, data)
          }
        })
      }
  
      // list topics when homepage is loaded
      listTopics()
  
      // submit topic when user click on 'enter' 
      $('#topic_input').keypress(function(e){
        if(e.keyCode==13){
          submitTopic()
          $('#topic_input').val('')
        } 
      })
  
      // user clicks on submit button
      $('#submitTopic').click(function(){
        submitTopic()
      })
    })

  
  </script>
  <div id="main" class="container">
    <div id="logo"></div>
    <div id="intro">
      <p>Create a room or select an existing room below to start</p>
    </div>
    <div class="top">
      <div id="newTopic_form">
        <div class="content">
          <div class="topic">
            <i class="icon-edit"></i>
            <input type="" id="topic_input" />
          </div>
          <span id="submitTopic" class="">Create/Enter Room <i class="icon-signin"></i> </span>
          <div style="clear:both;"></div>
        </div>
      </div>
    </div>
    
     <div class="bottom">
      <ul id="topList">
        <div class="container">
          <div id="listContainer"></div>
        </div>
      </ul>
    </div>
    
  </div>
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-41970141-1', 'meetexpert.in');
  ga('send', 'pageview');

</script>
</body>
</html>






